<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue2基础语法</title>
  <script src="./vue.js"></script>

</head>
<body>
<div id="d1">
  <p>Count is: {{ count }}</p>
  <!--1. 绑定methods方法中 -->
  <button @click="add">Add 1</button><hr>
  <!--2. 绑定多个事件，此时v-on不能简写为：@-->
  <input type="button" value="绑定多个事件(点击,鼠标移入,鼠标移出)"
         v-on="{click:btnClick,mouseover:btnMouseOver,mouseout:btnMouseOut}">
  <hr>
  <!--3. 事件传参,如果传递了其它参数，则事件对象event不是隐藏传入的，必须自己手动传入-->
  <input type="button" value="事件传参" @click="btnClick2('20',$event)">
</div>
</body>
</html>
<script>
  let vs = new Vue({
    el: '#d1',
    data:{
      message: 'hello',
      count: 0,
    },
    methods:{
      // 1. 增加count的值
      add(){
        this.count++
      },
      // 2. 点击事件
      btnClick(){
        console.log("按钮被点击！")
      },
      // 3. 鼠标移入事件
      btnMouseOver(event){
        let d = event.target          // 得到当前触发事件的事件源对象
        d.style.backgroundColor = 'orange'
        d.style.color = 'white'
        d.style.border = "1px solid black"
      },
      // 4. 鼠标移出事件
      btnMouseOut(event){
        let d = event.target         // 得到当前触发事件的事件源对象
        d.style.backgroundColor = '#efefef'
        d.style.color = "black"
      },
      // 5. 事件传参，如果传递了参数，还需要额外传递事件对象，则需要手动传入事件对象
      btnClick2(age,event){
        console.log(age)
        console.log(event)
      }
    }
  })
</script>
